/*
 * @Author: your name
 * @Date: 2022-03-30 19:36:05
 * @LastEditTime: 2022-04-07 11:33:19
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \lalalal\src\views\finance\Paymentlist.jsx
 */
import React, { useRef, useState } from 'react';
import { Button, Input, Form, Row, Col} from 'antd';
import Advancedsearch from './advancedSearch'
import Custommodalfrom from './customModal/customModal'
import './paymen.css'
import {
    CloudDownloadOutlined,
    DownOutlined,
    UpOutlined
} from '@ant-design/icons';
import Tabeldata from './table/tabel'
import Mybutton from './button/myButton';
const Paymentlist = () => {
    const formRef = useRef()
    const [downOrUp, setdownOrUp] = useState(false)

    const btnDataList = [
        {
            id: 1,
            title: '收支列表',
            count: 26
        },
        {
            id: 2,
            title: '今日收支',
            count: 3
        },
        {
            id: 3,
            title: '本周收支',
            count: 25
        },
        {
            id: 4,
            title: '本月收支',
            count: 26
        },
    ]
    //按钮数据
    const [btnData, setbtnData] = useState(btnDataList)
    const [inputInfo, setinputInfo] = useState()
    const inputValue = (e) => {
        console.log(e.target);
        setinputInfo(e.target.value)

    }

    //模糊搜索
    const onFinish = (values) => {
        console.log(values);
    };

    const onSearch = () => {
        console.log(inputInfo);

    }
    //高级搜索
    const btnAdvancedsearch = (e) => {
        setdownOrUp(!downOrUp)
    }

    //页面挂载
    return (
        <>
            {/* 头部按钮 */}
            <div className='container-top'>
                <Row style={{height:'50px'}}>
                    <Col span={16}>
                        <Mybutton btnData={btnData} size={'large'} />
                        <Button size='large' type="primary" icon={<CloudDownloadOutlined style={{ fontSize: '18px' }} />}
                            style={{ backgroundColor: '#5C7B9A' }}
                        >
                            数据导出
                        </Button>
                        
                        {/* 自定义设置 */}
                        <Custommodalfrom />
                    </Col>
                    <Col span={8} className='top-right'>

                        {/* 顶部搜索 */}
                        <Form ref={formRef} name="control-ref" layout={'inline'} onFinish={onFinish}>
                            <Form.Item
                                name="searchValue"
                                rules={[{ required: true, message: '请输入数据' }]}

                            >
                                <Input placeholder="客户名称、手机号码、备注" />
                            </Form.Item>
                            <Form.Item style={{ margin: '0' }}>
                                <Button type="primary" htmlType="submit" size="midlle" style={{ backgroundColor: '#4FABC1' }} onClick={onSearch}>搜索</Button>
                            </Form.Item>
                        </Form>

                        {/* 高级搜索 */}
                        <Button className='power-search' type="primary" size="midlle" style={{ backgroundColor: '#D65151' }} onClick={btnAdvancedsearch}>高级搜索
                            <span className='icon-style'>
                                {
                                    downOrUp ? <UpOutlined /> : <DownOutlined />
                                }

                            </span>
                        </Button>
                    </Col>
                </Row>
            </div>
            {/* 中部表单 */}
            {
                downOrUp ? < Advancedsearch /> : ''
            }
          
                <Tabeldata />


        </>
    );
}

export default Paymentlist;
